<template>
  <div id="zar">
          <ul>
              <template>
                  <ul>
                    <a class="m-sgitem">
                      <div class="sgfl">
                          <p>1</p>
                      </div>
                      <div class="sgfr">
                          <h4>最佳损友</h4>
                          <span>陈奕迅-LDFDFDF</span>
                          <div>
                          <img src="../assets/img/1.jpg" alt="">
                      </div>
                      </div>
                  </a>
                  </ul>
                
              </template>
          </ul>
  </div>
</template>

<script>
export default {
props:["zarArr"]
}
</script>

<style lang="scss" scoped>
#zar{
    .m-sgitem{
        margin-top: _vw(40);
        .sgfl{
            float: left;
            p{
                margin-top: _vw(35);
                width: _vw(100);
                height: _vw(70);
                line-height: _vw(70);
                background-color: red;
                text-align: center;
            }
        }
        .sgfr{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: _vw(150);
            background-color: royalblue;
          div{
                img{
                 margin-top: _vw(-95);
                 padding-right: -vw(20);
                 float:right;
                 width: _vw(50);
                }
            }
        }
          
    }
}
</style>